﻿var logoDesignerController = function ($scope, $modal,fileReaderFactory, $modalInstance) {

    // DATA INITIALIZATION
    $scope.ImageRotation = [
        { name: 'No Rotated', rotation: '' },
        { name: 'Rotate-90', rotation: 'fa-rotate-90' },
        { name: 'Rotate-180', rotation: 'fa-rotate-180' },
        { name: 'Rotate-270', rotation: 'fa-rotate-270' },
        { name: 'Flip-horizontal', rotation: 'fa-flip-horizontal' },
        { name: 'Flip-vertical', rotation: 'fa-flip-vertical' }
    ];


    $scope.logoSize = [
        { name: 'Size 1x', size: 'fa-stack-1x' },
        { name: 'Size 2x', size: 'fa-stack-2x' }
    ];

    // VARIABLES
    $scope.title = "Angular Logo Designer";
    $scope.selected = "fa fa-ban";
    $scope.imageBackGround = "fa fa-camera ";
    $scope.imageSrc = "App/Images/placeholderSquare.svg";
    $scope.clipArt = true;
    $scope.image = false;
    $scope.hasImage = false;
    $scope.imageName = "";  
    $scope.logoText = "Logo name optional";
    $scope.imagebackgroundColor = { color: 'blue' };
    $scope.clipArtColor = { color: 'red' };
    $scope.logoRotation = $scope.ImageRotation[0];
    $scope.backgroundRotation = $scope.ImageRotation[0];
    $scope.ImageLogoSize = $scope.logoSize[1];
    $scope.ImageBgLogoSize = $scope.logoSize[0];

    // SETTING THE ROTAION
    $scope.setRotateIndex = function ($index)
    {
        $scope.logoRotation = $scope.ImageRotation[$index];
    };

    $scope.setBgRotateIndex = function ($index)
    {
        $scope.backgroundRotation = $scope.ImageRotation[$index];
    };


    // SETTING THE SIZES
    $scope.setSizeIndex = function ($index)
    {
        $scope.ImageLogoSize = $scope.logoSize[$index];
    };

    $scope.setBgSizeIndex = function ($index)
    {
        $scope.ImageBgLogoSize = $scope.logoSize[$index];
    };

    $scope.imageStackSwitchSize = function() {
        if ($scope.imageBgStackSize != "fa-stack-1x") {
         

            $scope.ImageLogoSize = $scope.logoSize[1];
            $scope.ImageBgLogoSize = $scope.logoSize[0];
            var temp = $scope.selected;
            $scope.selected = $scope.imageBackGround;
            $scope.imageBackGround = temp;

        } else {

            $scope.ImageLogoSize = $scope.logoSize[0];
            $scope.ImageBgLogoSize = $scope.logoSize[1];
            var temp = $scope.selected;
            $scope.selected = $scope.imageBackGround;
            $scope.imageBackGround = temp;
        };

    };

    // SETTING COLOR 
    $scope.chooseLogoColor = function (element) {
        $scope.clipArtColor = { color: element.value };
       return  element.focus = false;
    };

    $scope.chooseBackgroundColor = function (element) {
        $scope.imagebackgroundColor = { color: element.value };
        return element.focus = false;
    };

    // GETTING LOGO ART CLIPS
    $scope.chooseLogo = function (element) {
        if (element.id == "logoid") {
            isLogo = true;
          
        } else {
            isLogo = false;
        }
        $scope.openIcons(isLogo);
    };

    $scope.openIcons = function (isLogo) {
        var modalInstance = $modal.open({
            templateUrl: '/App/Templates/logo-icons.html',
            controller: 'modalIconsController' 
        });

        modalInstance.result.then(function (selectedItem) {
            if (selectedItem != null || typeof selectedItem != 'undefined') {
                if (isLogo) {
                    $scope.selected = selectedItem;
                } else {

                    $scope.imageBackGround = selectedItem;

                };
            
                $scope.clipArt = true;
                $scope.image = false;
                $scope.file = null;
                $scope.imageName = "";
                $scope.hasImage = false;
            }
       
   
        }, function (e) {
            //alert("Error");
        });
    };

    $scope.iconSelection = function () {

        $scope.logoClipArtSettings = [
        { name: 'imageSrc', src: $scope.selected},
        { name: 'imageBackGroundSrc', src: $scope.imageBackGround },
        { name: 'imagebackgroundColor', color: $scope.imagebackgroundColor },
        { name: 'clipArtColor', color: $scope.clipArtColor },
        { name: 'logoRotation', rotation: $scope.logoRotation },
        { name: 'backgroundRotation', rotation: $scope.backgroundRotation },
        { name: 'ImageLogoSize', size: $scope.ImageLogoSize },
        { name: 'ImageBgLogoSize', size: $scope.ImageBgLogoSize }
        ];

        $modalInstance.close($scope.logoClipArtSettings);
    };


    // UPLOADING FILES MANAGER METHODS
    $scope.uploadPicture = function (file) {

        if (file != null || typeof file != 'undefined') {

            $modalInstance.close(file);
        };     
    };

    // PREVIEW THE UPLOADED LOGO
    $scope.file_changed = function (element) {
        $scope.clipArt = false;

        fileReaderFactory.readAsDataUrl(element.files[0], $scope)
                        .then(function (result) {
                            $scope.imageSrc = result;
                        });

        $scope.$on("fileProgress", function (e, progress) {
            $scope.progress = progress.loaded / progress.total;
        });

        $scope.image = true;
        $scope.hasImage = true;
        $scope.imageName = 'Image Name :' + element.files[0].name;

    };
};